<template>
  <div class="container-cart">
    <div class="group-list-product">
      <itemCart @change="itemCartChangeHandler" />
      <div v-if="cart.length === 0" class="item-nomore">购物车为空</div>
    </div>
    <van-submit-bar class="item-submit-bar" :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked" class="item-all-checked" checked-color="#D63A54" @click="checkboxHandler">全选</van-checkbox>
    </van-submit-bar>
    <!-- 导航栏 -->
    <itemTabbar now-page="2" />
  </div>
</template>

<script>
// api
import { productSettle } from '@/api/miva'
// item
import itemCart from '@/components/miva-item/item-list-cart'
import itemTabbar from '@/components/miva-item/item-tabbar'
// vuex
import { mapGetters } from 'vuex'
// vant
import { Toast } from 'vant'
export default {
  components: { itemCart, itemTabbar },
  data() {
    return {
      checked: false,
      value: 1,
      price_total: 3990,
      carDataList: []
    }
  },
  computed: {
    ...mapGetters(['cart']),
    submitData() {
      const arr = []
      for (const val of this.cart) {
        if (val.checked) {
          arr.push({
            goods_id: val.goods_id,
            options_id: val.options_id,
            num: val.num,
            ...val
          })
        }
      }
      return arr
    },
    totalPrice() {
      let total = 0
      for (const val of this.cart) {
        if (val.checked) {
          total += Number(val.specification_price) * Number(val.num)
        }
      }
      return total * 100
    },
    checkAll() {
      let checkAll = true
      for (const val of this.cart) {
        if (!val.checked) {
          checkAll = false
        }
      }
      return checkAll
    }
  },
  methods: {
    async onSubmit() {
      console.log('购物车提交订单-log', this.submitData)
      const verifyData = []
      for (const val of this.submitData) {
        verifyData.push({
          p_id: val.goods_id,
          s_id: val.options_id,
          num: val.num,
          mark: val.product_name + val.specification_name
        })
      }
      const res = await productSettle({ data: verifyData })
      if (Number(res.data) !== -1) {
        Toast(`${res.data}库存不足!`)
      }
      // 把订单信息存入vuex
      await this.$store.dispatch('miva/saveOredr', {
        goods_info: this.submitData,
        goods_total: this.totalPrice / 100
      })
      // 跳转到提交订单页面
      this.$router.push({ name: 'submitOrder' })
    },
    itemCartChangeHandler() {
      this.checked = this.checkAll
    },
    checkboxHandler() {
      const arr = []
      for (const val of this.cart) {
        if (this.checked) {
          val.checked = false
        } else {
          val.checked = true
        }
        arr.push(val)
      }
      this.$store.dispatch('miva/changeCart', arr)
    }
  }
}
</script>

<style lang="less">
.container-cart {
  .group {
    &-list-product {
      height: calc(100vh - 45px - 50px - 50px);
      overflow-y: scroll;
    }
  }
  .item {
    &-submit-bar {
      bottom: 50px;
    }
    &-all-checked {
      padding-left: 12px;
    }
  }
 .item-nomore {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #999;
  }
  .van-button--danger {
    color: #fff;
    background-color: #d63a54;
    border: 1px solid #d63a54;
  }
  .van-submit-bar__price {
    color: #d63a54;
    font-size: 14px;
  }
}
</style>
